<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>族谱</title>
<meta name="keywords" content="css,css3" />
<link rel="stylesheet" type="text/css" href="${ctx}/assets/css/main.css" />
<link rel="stylesheet" type="text/css"
	href="${ctx}/assets/css/font-awesome.min.css">
<script src="${ctx}/assets/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet"
	href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script
	src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
	<button class="btn btn-info btn-xs pull-left print">打印</button>
		<button class="btn btn-info btn-xs" onclick="javascript :history.back(-1)">返回</button>
	<button class="btn btn-default pull-right showall">显示所有</button>
	
	<div id="main">
		<div style="float: right">
			<button class="btn btn-success fangda">放大</button>
			<button class="btn btn-info xuoxiao">缩小</button>
		</div>
		<div class="tree"></div>
	</div>
	<!--<ul class="wrap-ms-right">
		<li class="ms-item addqizi" data-item="0"><i class="fa fa-plus"></i>&nbsp;
			添加配偶</li>
		<li class="ms-item addup" style='display: none' data-item="1"><i
			class="fa fa-plus"></i>&nbsp; 向上添加</li>
		<li class="ms-item adddown" data-item="1"><i class="fa fa-plus"></i>&nbsp;
			向下添加</li>
		<li class="ms-item modify" data-item="2"><i class="fa fa-files-o"></i>&nbsp;
			修改名称</li>
		<li class="ms-item remove" data-item="3"><i class="fa fa-trash"></i>&nbsp;
			删除当前</li>
	</ul>-->
	<div class="nameboxbg">
		<div class="namebox">
			<div class="title">请表单内容</div>
			<div class="form-horizontal" style="margin-top: 20px;">
				<div class="form-group">
					<label for="loginName" class="col-sm-2 control-label">登录名</label>
					<div class="col-sm-9">
						<input type="text" class="form-control loginName" id="loginName"
							placeholder="请输入登录名">
					</div>
				</div>

				<div class="form-group">
					<label for="name" class="col-sm-2 control-label">中文名</label>
					<div class="col-sm-9">
						<input type="text" class="form-control name" id="name"
							placeholder="请输入中文名">
					</div>
				</div>
				<div class="form-group">
					<label for="pwd" class="col-sm-2 control-label">密码</label>
					<div class="col-sm-9">
						<input type="password" class="form-control pwd" id="pwd"
							placeholder="请输入密码">
					</div>
				</div>
				<div class="form-group">
					<label for="telephone" class="col-sm-2 control-label">手机号</label>
					<div class="col-sm-9">
						<input type="text" class="form-control telephone" id="telephone"
							placeholder="请输入手机号">
					</div>
				</div>
				<div class="form-group">
					<label for="telephone" class="col-sm-2 control-label">性别</label>
					<div class="col-sm-9">
						<select class="form-control sex">
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-6 col-sm-6">
						<button class="btn btn-lg btn-success tijiao">提交</button>
						<button class="btn btn-lg btn-warning quxiao">取消</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function ONanimation() {
			$('.name').val('');
			$('#loginName').val('');
			$('.telephone').val('');
			$('.pwd').val('');
			$('.sex').attr("disabled", false);
			$('.nameboxbg').removeClass('boxbganimation1').addClass(
					'boxbganimation');
			$('.namebox').removeClass('boxanimation1').addClass('boxanimation');
		};

		function OFFanimation() {
			$('#loginName').val('');
			$('.name').val('');
			$('.telephone').val('');
			$('.pwd').val('');
			$('.sex').attr("disabled", false);
			$('.nameboxbg').removeClass('boxbganimation').addClass(
					'boxbganimation1');
			$('.namebox').removeClass('boxanimation').addClass('boxanimation1');
		};
		function getArray(arr) {
			var data = arr.children;
			var parid = arr.id;
			for ( var i in data) {
				data[i].parid = arr.id;
				var str = '<li><a href="${ctx}/user?token='+data[i].id+'" data-id="' + data[i].id + '" class="children' + data[i].id + '">'
						+ data[i].name + '</a></li>';
				if ($('.children' + parid).siblings('ul').length > 0) {
					$('.children' + parid).siblings('ul').append(str);
				} else {
					$('.children' + parid).after('<ul>' + str + '</ul>');
				}
				if (data[i].sex == '女') {
					$('.children' + data[i].id).css({
						'color' : 'pink',
						'border-color' : 'pink'
					});
					$('.children' + data[i].id).addClass("girl");
				}
				if (data[i].coupleName && data[i].coupleName != '') {
					if (data[i].sex == '男') {
						$('.children' + data[i].id)
								.append(
										'&nbsp; &nbsp; <a href="${ctx}/tree?token='
												+ data[i].coupleId
												+ '" style="color:pink;border-color:pink;">'
												+ data[i].coupleName + '</a>');
					} else {
						$('.children' + data[i].id).append(
								'&nbsp; &nbsp; <a href="${ctx}/tree?token='
										+ data[i].coupleId + '" >'
										+ data[i].coupleName + '</a>');
					}
				}

				if (Object.keys(data[i].children).length > 0) {
					getArray(data[i]);
				}
				//console.log(str)
			}
		};

		function openItem() {
			$
					.ajax({
						url : "${ctx}/api/genealogy",
						method : 'post',
						dataType : 'json',
						//contentType:'application/json',  
						xhrFields : {
							withCredentials : true
						},
						data : {
							'token' : '${topId}'
						},
						timeout : 1000,
						success : function(json) {
							var parentss = '';
							if (json.data == undefined){
								parentss = '<p style="padding: 0 20px;">搜索结果为空</p>';
							} else if (json.data.sex == '女'){
								parentss = '<ul><li><a href="${ctx}/user?token='+json.data.id+'" data-id="' + json.data.id + '" class="children' + json.data.id +
							' thistop girl" style="color:pink;border-color:pink;">'
										+ json.data.name + '</a></li></ul>';
							} else {
								parentss = '<ul><li><a href="${ctx}/user?token='+json.data.id+'" data-id="' + json.data.id + '" class="children' + json.data.id +
							' thistop">'
										+ json.data.name + '</a></li></ul>';
							}
							$('.tree').empty();
							$('.tree').append(parentss);
							if (json.data == undefined) {
								return;
							}
							else if(json.data.coupleName
									&& json.data.coupleName != '') {
								if (json.data.sex == '男') {

									$('.children' + json.data.id)
											.append(
													'&nbsp; &nbsp; <a href="${ctx}/user?token='
															+ json.data.coupleId
															+ '" style="color:pink;border-color:pink;">'
															+ json.data.coupleName
															+ '</a>');
								} else
									$('.children' + json.data.id).append(
											'&nbsp; &nbsp; <a href="${ctx}/user?token='
													+ json.data.coupleId + '">'
													+ json.data.coupleName
													+ '</a>');
							}
							getArray(json.data);
						},
						fail : function(err) {
							console.log(err)
						}
					})
		};

		function openItemAll() {
			$
					.ajax({
						url : "${ctx}/api/genealogyall",
						method : 'post',
						dataType : 'json',
						//contentType:'application/json',  
						xhrFields : {
							withCredentials : true
						},
						data : {
							'token' : '${topId}'
						},
						timeout : 1000,
						success : function(json) {
							var parentss = '';
							if (json.data.sex == '女') {
								parentss = '<ul><li><a href="${ctx}/user?token='+json.data.id+'" data-id="' + json.data.id + '" class="children' + json.data.id +
							' thistop girl" style="color:pink;border-color:pink;">'
										+ json.data.name + '</a></li></ul>';
							} else {
								parentss = '<ul><li><a href="${ctx}/user?token='+json.data.id+'" data-id="' + json.data.id + '" class="children' + json.data.id +
							' thistop">'
										+ json.data.name + '</a></li></ul>';
							}
							$('.tree').empty();
							$('.tree').append(parentss);
							if (json.data.coupleName
									&& json.data.coupleName != '') {
								if (json.data.sex == '男')
									$('.children' + json.data.id)
											.append(
													'&nbsp; &nbsp; <a href="${ctx}/user?token='
															+ json.data.coupleId
															+ '" style="color:pink;border-color:pink;">'
															+ json.data.coupleName
															+ '</a>');
								else
									$('.children' + json.data.id).append(
											'&nbsp; &nbsp; <a href="${ctx}/user?token='
													+ json.data.coupleId + '">'
													+ json.data.coupleName
													+ '</a>');
							}
							getArray(json.data);
						},
						fail : function(err) {
							console.log(err)
						}
					})
		};
		function deleteItem(token) {
			$.ajax({
				url : '${ctx}/api/genealogydelete',
				type : 'post',
				dataType : 'json',
				data : {
					id : token
				},
				timeout : 1000,
				success : function(json) {
					if (json.code == 200) {
						//window.location.reload();
						window.location.href = "${ctx}/tree";
					} else {
						alert(json.message);
					}

				},
				fail : function(err) {
					alert(arr);
				}
			})
		}

		function getItem(token) {
			$.ajax({
				url : '${ctx}/api/genealogyget',
				type : 'post',
				dataType : 'json',
				data : {
					id : token
				},
				timeout : 1000,
				success : function(json) {
					if (json.code == 200) {
						var data = json.data;
						$('#loginName').val(data.loginName);
						$('#name').val(data.name);
						$('#pwd').val(data.pwd);
						$('#telephone').val(data.telephone);
						$('.sex').val(data.sex);
						$('.sex').attr("disabled", false);
					} else {
						alert(json.message);
					}
				},
				fail : function(err) {
					alert(arr);
				}
			})
		}

		function updateItem(token) {
			var sex = $('.sex option:selected').val();
			var loginName = $('#loginName').val();
			var name = $('.name').val();
			var telephone = $('.telephone').val();
			var pwd = $('.pwd').val();
			if (name == '' || loginName == '') {
				alert('请输入名称');
				return false;
			}
			$.ajax({
				url : '${ctx}/api/genealogyupdate',
				type : 'post',
				dataType : 'json',
				data : {
					loginName : loginName,
					pwd : pwd,
					id : token,
					name : name,
					sex : sex,
					telephone : telephone
				},
				timeout : 1000,
				success : function(json) {
					OFFanimation();
					if (json.code == 200) {
						$('.data-this').removeClass('data-this');
						window.location.href = "${ctx}/tree";
						//window.location.reload();
					} else {
						alert(json.message);
					}
				},
				fail : function(err) {
					alert(arr);
				}
			})
		};

		function addItemChild(token) {
			var sex = $('.sex option:selected').val();
			var loginName = $('#loginName').val();
			var name = $('.name').val();
			var telephone = $('.telephone').val();
			var pwd = $('.pwd').val();
			if (name == '' || loginName == '') {
				alert('请输入名称');
				return false;
			}
			$.ajax({
				url : '${ctx}/api/genealogyaddchild',
				type : 'post',
				dataType : 'json',
				data : {
					loginName : loginName,
					pwd : pwd,
					token : token,
					name : name,
					sex : sex,
					telephone : telephone
				},
				timeout : 1000,
				success : function(json) {
					OFFanimation();
					if (json.code == 200) {
						$('.data-this').removeClass('data-this');
						window.location.href = "${ctx}/tree";
					} else {
						alert(json.message);
					}
				},
				fail : function(err) {
					alert(arr);
				}
			})
		};

		function addItemParent(token) {
			var sex = $('.sex option:selected').val();
			var loginName = $('#loginName').val();
			var name = $('.name').val();
			var telephone = $('.telephone').val();
			var pwd = $('.pwd').val();
			if (name == '' || loginName == '') {
				alert('请输入名称');
				return false;
			}
			$.ajax({
				url : '${ctx}/api/genealogyaddparent',
				type : 'post',
				dataType : 'json',
				data : {
					loginName : loginName,
					pwd : pwd,
					token : token,
					name : name,
					sex : sex,
					telephone : telephone
				},
				timeout : 1000,
				success : function(json) {
					OFFanimation();
					if (json.code == 200) {
						$('.data-this').removeClass('data-this');
						window.location.href = "${ctx}/tree";
					} else {
						alert(json.message);
					}
				},
				fail : function(err) {
					alert(arr);
				}
			})
		};

		function addItemCouple(token) {
			var sex = $('.sex option:selected').val();
			var loginName = $('#loginName').val();
			var name = $('.name').val();
			var telephone = $('.telephone').val();
			var pwd = $('.pwd').val();

			if (name == '' || loginName == '') {
				alert('请输入名称');
				return false;
			}
			$.ajax({
				url : '${ctx}/api/genealogyaddcouple',
				type : 'post',
				dataType : 'json',
				data : {
					loginName : loginName,
					pwd : pwd,
					token : token,
					name : name,
					sex : sex,
					telephone : telephone
				},
				timeout : 1000,
				success : function(json) {
					OFFanimation();
					if (json.code == 200) {
						$('.data-this').removeClass('data-this');
						window.location.href = "${ctx}/tree";
					} else {
						alert(json.message);
					}

				},
				fail : function(err) {
					alert(arr);
				}
			})
		};

		
			// 动画

			// 取消
			$('.quxiao').click(function() {
				OFFanimation();
				$('.data-this').removeClass('data-this');
			})
			$("body").on('li a').unbind("mousedown").bind("contextmenu",
					function(e) {
						e.preventDefault();
						return false;
					})
			var userId='';
			$("body").on("mousedown", 'li>a', function(event) {
				//var html = $('.tree').html();
				//console.log(html);
				$('.data-this').removeClass('data-this');
				$(this).addClass('data-this');
				 userId = $(this).attr('data-id');
				// console.log("userId = " + userId);
				if (event.which == 3) {
					$('.wrap-ms-right').css({
						"display" : "block",
						"top" : (event.pageY - 5) + "px",
						"left" : (event.pageX - 2) + "px"
					})
					//判断是否有已经有妻子;
					if ($('.data-this').find('a').length == 1) {
						$('.addqizi').hide();
					} else {
						$('.addqizi').show();
					}
					if ($('.data-this').hasClass('girl')) {
						$('.adddown').hide();
						$('.addqizi').hide();
					} else {
						$('.adddown').show();
						$('.addqizi').show();
					}
					//判断是否为顶层
					if ($('.data-this').hasClass('thistop')) {
						$('.addup').show();
					} else {
						$('.addup').hide();
					}
					
					
				}
			});
			var addtype = -1;
			$('.addqizi').click(function() {
				ONanimation();
				$('.sex').val('女');
				$('.sex').attr("disabled", true);
				addtype = 0;
			})
			$('.adddown').click(function() {
				ONanimation();
				addtype = 1;
			})
			$('.addup').click(function() {
				ONanimation();
				addtype = 2;
			})
			$('.modify').click(function() {
				ONanimation();
				getItem(userId);
				addtype = 3;
			})
			$('.remove').click(function() {
				deleteItem(userId);
			})

			$('.tijiao').click(function() {
				/*
					addtype 添加类型：0：妻子，1:向下，2：向上，3：修改，4：删除
				 */
				//console.log(userId);
				switch (addtype) {
				case 0:
					addItemCouple(userId);
					break;
				case 1:
					addItemChild(userId);
					break;
				case 2:
					addItemParent(userId);
					break;
				case 3:
					updateItem(userId);
					break;
				default:
					break;
				}
			})
			
			$(document).click(function() {
				$('.wrap-ms-right').css({
					"display" : "none"
				});
			});
			$('.showall').click(function() {
				openItemAll();
			});
			$('.print').click(function() {
				window.print();
			});
			$('.fangda').click(function(){
				var zoom = $('html').css('zoom');
				console.log(parseFloat(zoom) + 0.1);
				$('html').css('zoom', parseFloat(zoom) + 0.2);
			})
			$('.xuoxiao').click(function(){
				var zoom = $('html').css('zoom');
				console.log(parseFloat(zoom) - 0.1);
				$('html').css('zoom', parseFloat(zoom) - 0.2);
			})
			openItem();
		
	</script>
</body>
</html>